<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>多种样式的礼物愿望列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #818cf8;
            --primary-dark: #3730a3;
            --secondary: #f43f5e;
            --success: #10b981;
            --warning: #f59e0b;
            --light-bg: #f9fafb;
            --card-bg: #ffffff;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --border-color: #e5e7eb;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
            --shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-bg);
            color: var(--text-primary);
            padding-top: 56px;
        }
        
        /* 通用样式 */
        .section-title {
            padding: 16px;
            font-size: 1.25rem;
            font-weight: 600;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--card-bg);
        }
        
        .gift-item {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .gift-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        
        .gift-title {
            font-weight: 600;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .gift-meta {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .gift-price {
            color: var(--secondary);
            font-weight: 600;
        }
        
        .tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            margin-right: 4px;
            margin-bottom: 4px;
        }
        
        .tag-primary {
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        /* 1. 卡片式列表 */
        .card-list {
            padding: 12px;
        }
        
        .card-list .gift-item {
            background-color: var(--card-bg);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: var(--shadow-sm);
        }
        
        .card-list .gift-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            gap: 10px;
        }
        
        .card-list .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }
        
        .card-list .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .card-list .user-info {
            flex: 1;
        }
        
        .card-list .user-name {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .card-list .gift-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .card-list .gift-content {
            margin-bottom: 12px;
        }
        
        .card-list .gift-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 8px;
            border-top: 1px solid var(--border-color);
        }
        
        .card-list .actions {
            display: flex;
            gap: 16px;
        }
        
        .card-list .action-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--text-secondary);
            font-size: 0.8rem;
            background: none;
            border: none;
        }
        
        /* 2. 网格列表 */
        .grid-list {
            padding: 12px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .grid-list .gift-item {
            background-color: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .grid-list .gift-image {
            width: 100%;
            aspect-ratio: 1;
            overflow: hidden;
        }
        
        .grid-list .gift-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .grid-list .no-image {
            width: 100%;
            aspect-ratio: 1;
            background-color: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-light);
        }
        
        .grid-list .gift-details {
            padding: 12px;
        }
        
        .grid-list .gift-title {
            font-size: 0.9rem;
            line-height: 1.3;
        }
        
        .grid-list .gift-meta {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
        }
        
        /* 3. 时间线列表 */
        .timeline-list {
            padding: 12px;
            position: relative;
        }
        
        .timeline-list::before {
            content: '';
            position: absolute;
            left: 24px;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: var(--border-color);
        }
        
        .timeline-list .gift-item {
            padding-left: 56px;
            padding-bottom: 24px;
            position: relative;
        }
        
        .timeline-list .gift-item:last-child {
            padding-bottom: 12px;
        }
        
        .timeline-list .timeline-dot {
            position: absolute;
            left: 16px;
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--primary);
            z-index: 1;
        }
        
        .timeline-list .gift-content {
            background-color: var(--card-bg);
            border-radius: 10px;
            padding: 16px;
            box-shadow: var(--shadow-sm);
        }
        
        .timeline-list .gift-time {
            margin-bottom: 8px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .timeline-list .gift-footer {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }
        
        /* 4. 简约列表 */
        .simple-list {
            background-color: var(--card-bg);
        }
        
        .simple-list .gift-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .simple-list .gift-image {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .simple-list .gift-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .simple-list .no-image {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            background-color: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-light);
            flex-shrink: 0;
        }
        
        .simple-list .gift-info {
            flex: 1;
            min-width: 0;
        }
        
        .simple-list .gift-title {
            font-size: 0.95rem;
            margin-bottom: 4px;
        }
        
        .simple-list .gift-meta {
            display: flex;
            justify-content: space-between;
        }
        
        /* 切换样式按钮 */
        .style-tabs {
            display: flex;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            overflow-x: auto;
        }
        
        .style-tab {
            padding: 12px 16px;
            flex-shrink: 0;
            border: none;
            background: none;
            font-size: 0.9rem;
            color: var(--text-secondary);
            position: relative;
        }
        
        .style-tab.active {
            color: var(--primary);
        }
        
        .style-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: var(--primary);
        }
        
        /* 列表容器 */
        .list-container {
            display: none;
        }
        
        .list-container.active {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">礼物愿望列表</div>
        <button class="nav-btn">
            <i class="fas fa-search"></i>
        </button>
    </div>
    
    <!-- 样式切换标签 -->
    <div class="style-tabs">
        <button class="style-tab active" data-tab="card-list">卡片式</button>
        <button class="style-tab" data-tab="grid-list">网格式</button>
        <button class="style-tab" data-tab="timeline-list">时间线</button>
        <button class="style-tab" data-tab="simple-list">简约式</button>
    </div>
    
    <!-- 1. 卡片式列表 -->
    <div class="list-container active" id="card-list">
        <div class="section-title">热门礼物愿望</div>
        
        <div class="card-list">
            <!-- 带图礼物 -->
            <div class="gift-item">
                <div class="gift-header">
                    <div class="user-avatar">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像">
                    </div>
                    <div class="user-info">
                        <div class="user-name">数码爱好者</div>
                        <div class="gift-time">今天 10:23</div>
                    </div>
                </div>
                
                <div class="gift-content">
                    <h3 class="gift-title">希望能拥有一台轻便的笔记本电脑，用于学习和办公</h3>
                    <div class="gift-meta">
                        <span class="tag tag-primary">电子产品</span>
                        <span class="tag tag-primary">学习</span>
                    </div>
                </div>
                
                <div class="gift-footer">
                    <div class="gift-price">¥5,299</div>
                    <div class="actions">
                        <button class="action-btn">
                            <i class="far fa-heart"></i> 42
                        </button>
                        <button class="action-btn">
                            <i class="far fa-comment"></i> 15
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 带多图礼物 -->
            <div class="gift-item">
                <div class="gift-header">
                    <div class="user-avatar">
                        <img src="https://picsum.photos/id/65/100/100" alt="用户头像">
                    </div>
                    <div class="user-info">
                        <div class="user-name">旅行达人</div>
                        <div class="gift-time">昨天 16:45</div>
                    </div>
                </div>
                
                <div class="gift-content">
                    <h3 class="gift-title">想要一套高品质的旅行装备，包括行李箱和背包</h3>
                    <div class="gift-meta">
                        <span class="tag tag-primary">旅行</span>
                        <span class="tag tag-primary">户外</span>
                    </div>
                </div>
                
                <div class="gift-footer">
                    <div class="gift-price">¥1,899</div>
                    <div class="actions">
                        <button class="action-btn">
                            <i class="far fa-heart"></i> 67
                        </button>
                        <button class="action-btn">
                            <i class="far fa-comment"></i> 23
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 无图礼物 -->
            <div class="gift-item">
                <div class="gift-header">
                    <div class="user-avatar">
                        <img src="https://picsum.photos/id/91/100/100" alt="用户头像">
                    </div>
                    <div class="user-info">
                        <div class="user-name">音乐爱好者</div>
                        <div class="gift-time">3天前</div>
                    </div>
                </div>
                
                <div class="gift-content">
                    <h3 class="gift-title">希望能学习钢琴，想拥有一台电子琴作为入门练习</h3>
                    <div class="gift-meta">
                        <span class="tag tag-primary">音乐</span>
                        <span class="tag tag-primary">乐器</span>
                    </div>
                </div>
                
                <div class="gift-footer">
                    <div class="gift-price">¥1,299</div>
                    <div class="actions">
                        <button class="action-btn">
                            <i class="far fa-heart"></i> 38
                        </button>
                        <button class="action-btn">
                            <i class="far fa-comment"></i> 9
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 2. 网格列表 -->
    <div class="list-container" id="grid-list">
        <div class="section-title">精选礼物愿望</div>
        
        <div class="grid-list">
            <!-- 带图礼物 -->
            <div class="gift-item">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/21/300/300" alt="运动鞋">
                </div>
                <div class="gift-details">
                    <h3 class="gift-title">专业篮球鞋，适合比赛使用</h3>
                    <span class="tag tag-primary">运动</span>
                    <div class="gift-meta">
                        <span>2天前</span>
                        <span class="gift-price">¥899</span>
                    </div>
                </div>
            </div>
            
            <!-- 无图礼物 -->
            <div class="gift-item">
                <div class="no-image">
                    <i class="fas fa-book fa-2x"></i>
                </div>
                <div class="gift-details">
                    <h3 class="gift-title">经典文学名著套装，提升阅读量</h3>
                    <span class="tag tag-primary">书籍</span>
                    <div class="gift-meta">
                        <span>1周前</span>
                        <span class="gift-price">¥399</span>
                    </div>
                </div>
            </div>
            
            <!-- 带图礼物 -->
            <div class="gift-item">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/96/300/300" alt="护肤品">
                </div>
                <div class="gift-details">
                    <h3 class="gift-title">天然植物护肤品套装，适合干性皮肤</h3>
                    <span class="tag tag-primary">美妆</span>
                    <div class="gift-meta">
                        <span>4天前</span>
                        <span class="gift-price">¥599</span>
                    </div>
                </div>
            </div>
            
            <!-- 带图礼物 -->
            <div class="gift-item">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/119/300/300" alt="相机">
                </div>
                <div class="gift-details">
                    <h3 class="gift-title">便携数码相机，记录生活点滴</h3>
                    <span class="tag tag-primary">数码</span>
                    <div class="gift-meta">
                        <span>3天前</span>
                        <span class="gift-price">¥2,199</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 3. 时间线列表 -->
    <div class="list-container" id="timeline-list">
        <div class="section-title">最新发布的礼物愿望</div>
        
        <div class="timeline-list">
            <!-- 带图礼物 -->
            <div class="gift-item">
                <div class="timeline-dot"></div>
                <div class="gift-content">
                    <div class="gift-time">今天 09:15</div>
                    <h3 class="gift-title">希望得到一套专业的绘画工具，包括水彩和画笔</h3>
                    <div class="gift-meta">
                        <span class="tag tag-primary">艺术</span>
                        <span class="tag tag-primary">绘画</span>
                        <span class="gift-price">¥459</span>
                    </div>
                    <div class="gift-footer">
                        <span>来自：美术生小杨</span>
                        <button class="btn btn-sm btn-primary">支持</button>
                    </div>
                </div>
            </div>
            
            <!-- 无图礼物 -->
            <div class="gift-item">
                <div class="timeline-dot"></div>
                <div class="gift-content">
                    <div class="gift-time">昨天 20:32</div>
                    <h3 class="gift-title">想要一本考研英语真题解析，备战明年研究生考试</h3>
                    <div class="gift-meta">
                        <span class="tag tag-primary">学习</span>
                        <span class="tag tag-primary">考研</span>
                        <span class="gift-price">¥89</span>
                    </div>
                    <div class="gift-footer">
                        <span>来自：奋斗的学子</span>
                        <button class="btn btn-sm btn-primary">支持</button>
                    </div>
                </div>
            </div>
            
            <!-- 带图礼物 -->
            <div class="gift-item">
                <div class="timeline-dot"></div>
                <div class="gift-content">
                    <div class="gift-time">3天前 15:47</div>
                    <h3 class="gift-title">需要一台便携式投影仪，周末和朋友看电影用</h3>
                    <div class="gift-meta">
                        <span class="tag tag-primary">家电</span>
                        <span class="tag tag-primary">娱乐</span>
                        <span class="gift-price">¥1,599</span>
                    </div>
                    <div class="gift-footer">
                        <span>来自：电影爱好者</span>
                        <button class="btn btn-sm btn-primary">支持</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 4. 简约列表 -->
    <div class="list-container" id="simple-list">
        <div class="section-title">全部礼物愿望</div>
        
        <div class="simple-list">
            <!-- 带图礼物 -->
            <div class="gift-item">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/292/300/300" alt="厨房用具">
                </div>
                <div class="gift-info">
                    <h3 class="gift-title">高品质厨房刀具套装，提升厨艺</h3>
                    <div class="gift-meta">
                        <span>5天前</span>
                        <span class="gift-price">¥699</span>
                    </div>
                </div>
            </div>
            
            <!-- 无图礼物 -->
            <div class="gift-item">
                <div class="no-image">
                    <i class="fas fa-gamepad"></i>
                </div>
                <div class="gift-info">
                    <h3 class="gift-title">最新款游戏手柄，增强游戏体验</h3>
                    <div class="gift-meta">
                        <span>1周前</span>
                        <span class="gift-price">¥329</span>
                    </div>
                </div>
            </div>
            
            <!-- 带图礼物 -->
            <div class="gift-item">
                <div class="gift-image">
                    <img src="https://picsum.photos/id/3/300/300" alt="背包">
                </div>
                <div class="gift-info">
                    <h3 class="gift-title">多功能户外背包，适合徒步旅行</h3>
                    <div class="gift-meta">
                        <span>2周前</span>
                        <span class="gift-price">¥459</span>
                    </div>
                </div>
            </div>
            
            <!-- 无图礼物 -->
            <div class="gift-item">
                <div class="no-image">
                    <i class="fas fa-microphone"></i>
                </div>
                <div class="gift-info">
                    <h3 class="gift-title">专业麦克风，用于录制播客和配音</h3>
                    <div class="gift-meta">
                        <span>3周前</span>
                        <span class="gift-price">¥899</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 切换不同列表样式
        const styleTabs = document.querySelectorAll('.style-tab');
        const listContainers = document.querySelectorAll('.list-container');
        
        styleTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有激活状态
                styleTabs.forEach(t => t.classList.remove('active'));
                listContainers.forEach(c => c.classList.remove('active'));
                
                // 添加当前激活状态
                tab.classList.add('active');
                const tabId = tab.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
            });
        });
        
        // 为所有交互按钮添加事件
        document.querySelectorAll('.action-btn, .btn-primary').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const actionText = this.textContent.trim() || '操作成功';
                alert(actionText);
            });
        });
    </script>
</body>
</html>
